<template>
	<div>
		<el-dialog title="选择文件" :visible.sync="dialogVisible" width="60%" class="uploaddialog">
		<div class="uploadtop">
                    <span class="hand" @click="showCom(1)">图片({{imagetotal}})</span>
                    <span class="hand" @click="showCom(2)">音频({{audiototal}})</span>
                    <span class="hand" @click="showCom(3)">视频({{videototal}})</span>
					<span class="hand" @click="showCom(4)">文件({{filestotal}})</span>
		 </div>
			<uploadbottomimage v-show="showcom==1?true:false" ref="uploadbottomimage" v-on:updateImageTotal="updateImageTotal"></uploadbottomimage>
			<uploadbottomaudio v-show="showcom==2?true:false" ref="uploadbottomaudio" v-on:updateAudioTotal="updateAudioTotal"></uploadbottomaudio>
			<uploadbottomvideo v-show="showcom==3?true:false" ref="uploadbottomvideo" v-on:updateVideoTotal="updateVideoTotal"></uploadbottomvideo>
			<uploadbottomfiles v-show="showcom==4?true:false" ref="uploadbottomfiles" v-on:updateFilesTotal="updateFilesTotal"></uploadbottomfiles>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="condialogVisible">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
    import uploadbottomimage from '@/components/common/uploadbottomimage.vue';
    import uploadbottomaudio from '@/components/common/uploadbottomaudio.vue';
    import uploadbottomvideo from '@/components/common/uploadbottomvideo.vue';
	import uploadbottomfiles from '@/components/common/uploadbottomfiles.vue';
	export default {
		components: {
            uploadbottomimage,
            uploadbottomaudio,
            uploadbottomvideo, 
			uploadbottomfiles
		},
		data() {
			return {
				dialogVisible: false,
				imagetotal: 0,
                audiototal: 0,
                videototal: 0,
                filestotal: 0,
				isone: true,
                showcom:1,
			}
		},
		methods: {
			condialogVisible() { //确认按钮
                switch(this.showcom){
                    case 1:
                        var data = this.$refs.uploadbottomimage.multipleSelection;
                        break;
                    case 2:
                        var data = this.$refs.uploadbottomaudio.multipleSelection;
                        break;
                    case 3:
                        var data = this.$refs.uploadbottomvideo.multipleSelection;
                        break;
                    case 4:
                        var data = this.$refs.uploadbottomfiles.multipleSelection;
                        break;
                }
				if (this.isone) {
					if (data.length != 1) {
						this.$message.error('只能选择1个文件！');
						return;
					}
					// //this.$parent.$parent.nowitem.dantuimg.src=this.multipleSelection[0].src;
                    this.$emit('childByMoreFilesValue', data[0]);
                    console.log(data[0]);
				} else {
                    this.$emit('childByMoreFilesValue', data);
				}
				this.dialogVisible = false;
			},
            updateImageTotal: function(childValue) {
				this.imagetotal = childValue;
			},
            updateAudioTotal: function(childValue) {
				this.audiototal = childValue;
			},
            updateVideoTotal: function(childValue) {
				this.videototal = childValue;
			},
			updateFilesTotal: function(childValue) {
				this.filestotal = childValue;
			},
            showCom(val){
                this.showcom=val;
            },
		},
        create(){
            this.updateImageTotal();
            this.updateAudioTotal();
            this.updateVideoTotal();
            this.updateFilesTotal();
        }
	}
</script>

<style lang="scss">
	.uploaddialog {
		.el-tree-node:focus>.el-tree-node__content {
			background-color: #409EFF;
			color: white;
		}

		.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
			background-color: #409EFF;
			color: white;
		}

		.uploadtop {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			line-height: 50px;
			margin-bottom: 10px;

			span {
				padding-left: 20px;
				padding-right: 10px;
				display: inline-block;
				line-height: 50px;

			}
		}
	  .hand{
        cursor: pointer;
	  }
	}
</style>
